iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

JavaScript初心者ノ研究日記。系列 第 25

二十五日目:JavaScript ⑅ Array.reduce ノ章

  • 分享至 

  • xImage
  •  

おはー(Uㅎ_ㅎU)⑅ SONYKO 打油 ( 眼神死 )

已經連續好幾天睡眠 < 5hr 了
睡太少好像真的會變笨 糟糕。

 

最近開始覺得腦袋動不太起來、
對著MDN 發呆的時間也變多了 w 
( 總覺得很像惡靈古堡的那個管理員的日記

癢 好吃

 

今天介紹一個讚匹兩論的陣列操作 —— reduce
來看看他是什麼神奇的東西吧。

 


⑅ reduce リデュース

reduce 老實說我沒有用過他 (ง ˙˘˙ )ว ✧
聽說他可以做得事情很多、多到我不太知道他在幹嘛ww

所以我只介紹我蝌蚪腦能理解的部分 。

⑅ reduce 的公式:

// 陣列操作、有陣列也是摸雞弄的事情。
let arr = [1,2,3,4,5]

let 變數名 = arr.reduce(function(函式參數){

		// 執行動作寫這邊 

},第2參數)

所以 reduce 的括號內會帶一個函式、與第2 參數。
那個第2 參數我們可以說他是 「 初始値 」✧

 


⑅ reduce 語法解說

reduce 有人說他像是有帶有 暫存器 的 forEach、
還記得 forEach 怎麼累加嗎?

我們會先建立一個變數、專門用來裝 forEach 累加結果的變數。
那個變數我們會賦予他 0 的値。

接著使用 forEach 跑過陣列每筆資料,
把資料一一加到變數裡面,最後再輸出總價。 如下:

let num = [1,2,3,4,5,6,7]
let total = 0

num.forEach((i)=>{
	total += i
})
console.log (total)   // 28

reduce 的概念就是,你可以帶一個暫存的變數,並能不斷地對他做累積性的變更。
最後會傳回暫存的變數,並作為結果。

⑅ 來看程式碼:

let num = [100,200,300,400,500]
let total = num.reduce(function(total,i){
	return total + i
},0)

console.log(total) // 1500
  • 上面的 function(total,i) 的 total 是那個累積的暫存、i 代表每個元素。
  • total 的初始値 是我們的第2 參數,
    若不打參數就是0 、當然你也可以代100 進去,你的total 就會從100 開始累加。

⑅ 再來看一個範例:

// 安定ㄉ陣列
let hp = [
	{ name:'鋼龍',
		hp: 18000 },
	{ name: '冰咒龍',
		hp: 20000 },
	{ name: '眩鳥',
		hp: 10 },
	{ name: '泡狐龍',
		hp: 500 }
]

// 如上面介紹的 用reduce 將 hp 全部加起來
let total_hp = hp.reduce(function(total_hp,i){
		return total_hp + i.hp
},10000) // 這邊注意、初始値是給 10000

console.log(total_hp)    // 48510

這個範例我們試著讓初始値為 10000、
理所當然它會從 10000 開始累加陣列中的 hp 。

 

°♡ 這邊注意:
  function 內的第一個參數沒有規定要使用變數名稱。
  只是方便理解才這樣寫的 (U 'ᴗ' U)

let num = [1,2,3]
let new_num = num.reduce(function(a,b){
			return a + b
},0)

console.log(new_num)    // 6

證實:函式參數你想帶什麼都可以。

 


⑅ reduce 還能做什麼

reduce 根本萬能工具人。
這邊舉一些例子。

  • 字串加總
    可以加數字、它當然也能加字串 ✧
    像這樣:

    let str = ['ま','っ','き','ー','今日','も','かわいい。']
    let new_str = str.reduce(function(new_str,i){
    	return new_str + i
    })
    console.log(new_str)
    				// "まっきー今日もかわいい。"
    
  • 當 map 用

    const arr = [11, 22, 33]
    
    const result = arr.reduce((r, i, index) => {
      r[index] = 1000 + i
      return r
    }, [])
    console.log(result)
       // [ 1011, 1022, 1033 ]
    

♡  index 為陣列的索引 。

  • 當 filter 用

    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    
    const result = arr.reduce((r, i) => {
      if (i % 3 === 0) {
        r.push(i)
      }
      return r
    }, [])
    console.log(result)  // [ 3, 6, 9 ]
    
  • 當 find 用

    const result = arr.reduce((r, i) => {
      if (r) {
        return r;
      }
    
      if (i.id === '003') {
        return i;
      }
    
      return undefined;
    }, undefined);
    console.log(result);
        // { id: "003", name: "傘電鳥" }
    

 

 

哇賽、什麼都會欸 ww
當然還有更多的寫法、這邊先舉部分我看得懂的例子 。

想吸收所有用法,請服用 MDN (U 'ᴗ' U) ♡♡

 

 

什麼? 你說我今天怎麼好像滿偷懶的?
欸欸欸欸,你看視窗右上角好像有什麼東西 !

 

 

 

                   ε≡≡ヘ( ´Д`)ノ 逃跑

 

 


୨୧(U 'ᴗ' U) SONYKO的 前端日文小教室 ♡

 

「師傅!不要丟下我啊!」

「徒兒、師傅怎麼會丟下你呢?」
「徒兒你看視窗右上角、好像有什麼東西!」

 

                   ε≡≡ヘ( ´Д`)ノ

 
音声ファイル(U 'ᴗ' U)♡

 

師傅最近很苦惱、
因為他找不到什麼好單字可以教 ((

 

既然 JS 單字教得差不多了、就來點 HTML關聯的吧。

⑅ HTML 的唸法: 欸氣 踢 欸姆 欸魯
  超煞氣、還不快記起來

⑅ 箇条書き(かじょうがき)條列式,也就是我們的
  唸法: Ka Jou Ga Ki
 
⑅ アプリ application 的縮寫、應用程式
  唸法:阿普哩
 
⑅ スマホアプリ Smartphone Application 的縮寫
  WTF 你們怎麼那麼愛縮寫
  唸法:斯嗎齁 阿普哩
 
⑅ 検索エンジン( けんさくえんじん )搜尋引擎
  唸法:Ken Saku En Jin
 
⑅ テキストエディタ Text Editor 文字編輯器
  唸法:Teki Suto 欸低塔
 
⑅ ソースコード source code 程式碼
  唸法:艘~斯 扣~抖
 
⑅ レイアウト layout 唸法:雷伊 奧屋透
 
 

 

「 欸、你的 欸取踢欸姆欸魯 的 雷伊奧嗚透 做完了沒啊?」


上一篇
二十四日目:JavaScript ⑅ filter ⑅ join ⑅ slice ⑅ map ノ章 °♡
下一篇
二十六日目:JavaScript 陣列操作 終ノ章  ⑅( ◜ᴗ◝)❤︎
系列文
JavaScript初心者ノ研究日記。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言